<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<template v-if="loadingState.default">
				<loading :loadingState="loadingState"></loading>
			</template>
			<template v-else>
				<view class="body">
					<view class="change-btn">
						<view class="select-data">设备名称：{{ dev_name }}</view>
					</view>
					<!-- 详情状态 -->
					<template v-if="!isSetting">
						<view class="detail-wrap m-t2">
							<view class="detail-item">
								<view class="label">灯管开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.light_is_work == 1 ? true : false" disabled></switch>
									<view class="state">{{ params.light_is_work == 1 ? '开' : '关' }}</view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">拍照间隔</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{ params.camera_interval }}min</view>
									</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">工作模式</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{ params.work_status_name }}</view>
									</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</view>
							<view class="detail-item">
								<view class="label">工作时长</view>
								<view class="detail-input">
									<view class="content">
										<view class="val t-r">{{ params.everyday_work_date || '--' }}</view>
									</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</view>
						</view>
					</template>

					<!-- 设置状态 -->
					<template v-else>
						<view class="form-wrap m-t2">
							<view class="form-item">
								<view class="label">灯管开关</view>
								<view class="detail-switch">
									<switch color="#3399FF" :checked="params.light_is_work == 1 ? true : false" @change="lightSwitch"></switch>
									<view class="state">{{ params.light_is_work == 1 ? '开' : '关' }}</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">拍照间隔</view>
								<picker class="form-picker" mode="selector" :range="camera_interval_data" @change="changeWorkdata">
									<view class="picker">
										<view class="select-data t-l">{{ params.camera_interval }}min</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">工作模式</view>
								<picker class="form-picker" mode="selector" :range="detail.work_status" range-key="name" @change="changeWorkStatus">
									<view class="picker">
										<view class="select-data t-l">{{ params.work_status_name }}</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">工作时长</view>
								<view class="form-input">
									<view class="content">
										<view v-if="params.work_status == 1" class="val work-time">
											<view class="start">
												<view class="disabled">{{ params.everyday_work_date_start }}</view>
											</view>
											<view class="line">-</view>
											<view class="over">
												<view class="disabled">{{ params.everyday_work_date_over }}</view>
											</view>
										</view>
										<view v-else class="val work-time">
											<view class="start">
												<picker mode="time" @change="changeTime($event, 1)">
													<view>{{ params.everyday_work_date_start }}</view>
												</picker>
											</view>
											<view class="line">-</view>
											<view class="over">
												<picker mode="time" @change="changeTime($event, 2)">
													<view>{{ params.everyday_work_date_over }}</view>
												</picker>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom">
						<view v-if="!isSetting" class="submit-btn" @click="showSetting">设置</view>
						<view v-else class="submit-btn" @click="saveSetting">保存设置</view>
					</view>
				</view>
			</template>
		</template>
	</view>
</template>

<script>
import formdemo from '@/components/form.vue';
import loading from '@/components/loading-more.vue';
export default {
	name: 'name',
	data() {
		return {
			dev_num: '',
			dev_name: '',
			isLogin: false,
			isIphoneX: getApp().globalData.isIphoneX,
			appid: getApp().globalData.appid,
			token: uni.getStorageSync('token'),
			userInfo: uni.getStorageSync('userInfo'),
			loginStateUpdate: false,
			isStop: true,
			loadingState: {
				default: true
			},
			isSetting: false,
			detail: {},
			params: {
				light_is_work: '',
				work_status: '',
				work_status_name: '',
				camera_interval: '',
				everyday_work_date: '',
				everyday_work_date_start: '',
				everyday_work_date_over: ''
			},
			camera_interval_data: [10, 20, 30, 40, 50, 60]
		};
	},
	async onLoad(params) {
		this.dev_num = params.dev_num;
		this.dev_name = params.dev_name;
		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				this.detail = await this.getDeviceSetDetail();
				this.setParams();
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},
	async onShow() {
		if (this.loginStateUpdate) {
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.detail = await this.getDeviceSetDetail();
			this.setParams();
			this.loginStateUpdate = false;
		}

		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}
	},
	methods: {
		// 获取设备管理详情
		getDeviceSetDetail: async function() {
			let res = await this.$api.tool_api.getHbDeviceSetDetail({
				appid: this.appid,
				token: this.token,
				device_num: this.dev_num
			});
			if (res.data.ret == 1000) {
				this.loadingState.default = false;
				return res.data.data;
			}
		},

		// 获取设备管理参数
		setParams: function() {
			this.params.camera_interval = this.detail.list.camera_interval;
			this.params.light_is_work = this.detail.list.light_is_work;
			this.params.everyday_work_date = this.detail.list.everyday_work_date;
			if (this.detail.list.work_status == 1) {
				this.params.everyday_work_date = '00.00-00.00';
				this.params.everyday_work_date_start = '00.00';
				this.params.everyday_work_date_over = '00.00';
			} else {
				if (this.detail.list.everyday_work_date) {
					this.params.everyday_work_date_start = this.detail.list.everyday_work_date.split('-')[0];
					this.params.everyday_work_date_over = this.detail.list.everyday_work_date.split('-')[1];
				} else {
					this.params.everyday_work_date_start = '00.00';
					this.params.everyday_work_date_over = '00.00';
				}
			}
			this.detail.work_status.forEach(item => {
				if (item.id == this.detail.list.work_status) {
					this.params.work_status_name = item.name;
					this.params.work_status = item.id;
				}
			});
		},

		// 开关
		lightSwitch: function(e) {
			this.params.light_is_work = e.detail.value ? 1 : 2;
		},

		// 工作模式切换
		changeWorkStatus: function(e) {
			let index = e.detail.value;
			this.params.work_status = this.detail.work_status[index].id;
			this.params.work_status_name = this.detail.work_status[index].name;
			this.params.everyday_work_date_start = '00.00';
			this.params.everyday_work_date_over = '00.00';
			this.params.everyday_work_date = this.params.everyday_work_date_start + '-' + this.params.everyday_work_date_over;
		},

		// 切换拍照间隔
		changeWorkdata: function(e) {
			let index = e.detail.value;
			this.params.camera_interval = this.camera_interval_data[index];
		},

		// 设置开始时间
		changeTime: function(e, type) {
			if (type == 1) {
				this.params.everyday_work_date_start = e.detail.value;
			} else if (type == 2) {
				this.params.everyday_work_date_over = e.detail.value;
			}
			this.params.everyday_work_date = this.params.everyday_work_date_start + '-' + this.params.everyday_work_date_over;
		},

		// 打开设置
		showSetting: function() {
			this.isSetting = true;
		},

		// 保存设置
		saveSetting: async function() {
			if (this.isStop) {
				this.isStop = false;
				uni.showLoading({
					title: '保存中'
				});

				let res = await this.$api.tool_api.saveHbDeviceSet({
					appid: this.appid,
					token: this.token,
					device_num: this.dev_num,
					work_status: this.params.work_status,
					camera_interval: this.params.camera_interval,
					everyday_work_date: this.params.everyday_work_date,
					light_is_work: this.params.light_is_work,
					user_id: this.userInfo.uid
				});
				if (res.data.ret == 1000) {
					uni.hideLoading();
					this.$showToast({
						icon: 'success',
						title: '设置成功'
					}).then(() => {
						setTimeout(async () => {
							this.isStop = true;
							this.isSetting = false;
							this.detail = await this.getDeviceSetDetail();
							this.setParams();
						}, 2000);
					});
				} else {
					uni.hideLoading();
					this.$showToast({
						icon: 'error',
						title: '设置失败'
					});
					setTimeout(() => {
						this.isStop = true;
					}, 300);
				}
			}
		}
	},
	components: {
		loading
	},
	computed: {},
	watch: {}
};
</script>

<style lang="less">
.submit-btn {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #0085ff;
	color: #fff;
	font-size: 32rpx;
}
.work-time {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	.start,
	.over {
		flex-grow: 2;
		border: 0.1rpx solid #ddd;
		text-align: center;
	}
	.line {
		margin: 0 10rpx;
	}
	.disabled {
		background: #f5f5f5;
		color: #999;
	}
}
</style>
